<template>
	<view>
		<!-- 导航栏 -->
		<u-navbar
			title="评价中心"
			:is-back="true"
			:title-bold="true"
			:background="background"
			title-color="#fff"
			:border-bottom="false"
		></u-navbar>
		
		<!-- 主体内容 -->
		<vie class="content_box">
			<view class="form_box">
				<u-form :model="form" ref="uForm">
					<u-form-item prop="score">
						<text class="title">菜品评价</text>
						<u-rate :min-count="1" :count="count" v-model="form.score"></u-rate>
					</u-form-item>
					<u-form-item prop="evaluate">
						<u-input 
							:v-model="form.evaluate"
							:type="type" 
							:placeholder='icon' 
							:height="height" 
							:maxlength="250"
							:auto-height="autoHeight"
							@input="inputHandle"></u-input>
					</u-form-item>
					<u-form-item prop="evaluate_url">
						<u-upload 
							ref="uUpload"
							:header="header"
							:action="action" 
							@on-success="successUpload"
							@on-change="changeUpload"
							@on-error="errorUpload"
							@on-remove="removeUpload"
							:file-list="fileList">
						</u-upload>
					</u-form-item>
					<u-form-item prop="anonymous">
						<u-checkbox-group shape="circle">
							<u-checkbox v-model="form.anonymous" active-color="#ff9900">匿名发布</u-checkbox>
						</u-checkbox-group>
					</u-form-item>
				</u-form>
			</view>
			<view class="btn_box">
				<u-button type="warning" size="medium" shape="circle" @click="onsubmit">发布</u-button>
			</view>
		</vie>
	</view>
</template>

<script>
import config from "@/common/config.js"
import { evalAdd } from "@/api/evaluate.js"

export default {
	data() {
		return{
			background: {
				backgroundColor: '#ff9900'
			},
			count: 5,
			icon: '分享真实消费体验可以帮到更多人哦~',
			type: 'textarea',
			height: 100,
			autHeight: true,
			flieList: [],
			action: `${config.BASE_URL}/common/upload`,
			header: {
				Authorization: ''
			},
			form: {
				userId: '',
				orderId: '',
				evaluate: '',
				evaluateUrl: '',
				anonymous: true
			}
		}
	},
	onLoad(options) {
		const orderData = JSON.parse(decodeURIComponent(options.data))
		console.log(orderData,"订单参数")
		this.form = {
			userId: orderData.userId,
			orderId: orderData.id,
			comboId: orderData.comboId,
			state: 1,
			evaluate:'',
			score: 5
		}
	},
	onShow() {
		const value = `Bearer ${uni.getStorageSync('token')}`
		this.header.Authorization = value
	},
	methods: {
		inputHandle(e){
			this.form.evaluate = e;
		},
		onsubmit(){
			this.$refs.uForm.validate(async (valid) => {
				if (!valid) {
					return
				} 
				await evalAdd({ ...this.form, anonymous: ~~this.form.anonymous })
				this.showToast('发布成功')
				uni.navigateBack()
			})
		},
		successUpload(data, index, lists, name) {
			if (data.code == "200") {
				let imgarr = [];
				imgarr = lists.map((item) => {
					return item.response.fileName;
				});
				this.form.evaluateUrl = imgarr.join(",");
			}
		},
		changeUpload(res, index, lists, name) {
			// console.log("changeUpload", lists);
		},
		errorUpload(res, index, lists, name) {},
		removeUpload(index, lists, name) {
			let imgarr = [];
			imgarr = lists.map((item) => {
				return item.response.fileName;
			});
			this.form.evaluateUrl = imgarr.join(",");
		}
	}
}
</script>

<style>
page {
	background-color: #eeeeee;
}
</style>
<style scoped lang="scss">
.privacy_box {
	font-size: 26rpx;
	color: #888;
	position: fixed;
	bottom: 100rpx;
	left: 20rpx;
}
.content_box {
	padding: 0 20rpx;
	margin-top: 25rpx;
	
	.form_box {
		width: 100%;
		// height: 400rpx;
		background-color: #fff;
		padding: 24rpx 28rpx;
		border-radius: 10rpx;
	
		.title {
			margin-right: 10px;
		}
		.slot-btn {
			width: 341rpx;
			height: 140rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: rgb(244, 245, 246);
			border-radius: 10rpx;
		}
	
		.slot-btn__hover {
			background-color: rgb(235, 236, 238);
		}
	
		.pre-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
		}
	
		.pre-item {
			flex: 0 0 48.5%;
			border-radius: 10rpx;
			height: 140rpx;
			overflow: hidden;
			position: relative;
			margin-bottom: 20rpx;
		}
	
		.pre-item-image {
			width: 100%;
			height: 140rpx;
		}
	}
	.btn_box {
		display: flex;
		justify-content: center;
		margin-top: 30rpx;
	}
}
</style>